<!--  -->
<template>
  <div class="rightbar">
    <div class="imgbox">
      <img src="../../../assets/images/tDHIGcoOj.png" alt="" />
    </div>
    <div class="sliderbox">
      <img src="../../../assets/images/sliderpic.png" alt="" />
    </div>
    <div class="imgbox">
      <img src="../../../assets/images/NZgO0dfcL.png" alt="" />
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
};
</script>
<style scoped>
.rightbar {
  position: absolute;
  top: 110px;
  right: 0;
  transform: rotateY(180deg);
  width: 80px;
  height: calc(100% - 150px);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.rightbar .imgbox {
  width: 78px;
  height: 48%;
}
.imgbox img {
  width: 100%;
  height: 100%;
}
.sliderbox {
  width: 75px;
  height: 34px;
  animation: sliderright 4s infinite linear;
}
.sliderbox img {
  width: 100%;
  height: 100%;
}
@keyframes sliderright {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(40px);
  }
  100% {
    transform: translateX(0);
  }
}
</style>